<template>
    <div class="user">
        <h1>用户列表</h1>
        <div>
            <el-table style="width: 100%" border :data="userList">
                <el-table-column type="index" label="序号" width="80" align='center'>
                    <template slot-scope="{row,$index}">
                        {{pageSize* (pageNo-1)+ $index+1}}
                    </template>
                </el-table-column>
                <el-table-column prop="name" label="用户名称" width="width" align='center'>
                    <template slot-scope="{row,$index}">
                        {{ row.name?row.name:"无"}}
                    </template>
                </el-table-column>
                <el-table-column prop="phone" label="注册手机号" width="width" align='center'>
                </el-table-column>
                <el-table-column prop="creatTime" label="注册时间" width="width" align='center'>
                </el-table-column>
                <el-table-column prop="isBanned" label="账号是否封禁" width="110" align='center'> 
                    <template slot-scope="{row,$index}">
                        <p>{{ row.isBanned==0?'否':"是"}}</p>
                    </template>
                </el-table-column>
                <el-table-column prop="prop" label="操作" width="width" align='center'>
                    <template slot-scope="{row,$index}">
                        <!-- 这里按钮之后用hintButton替换 -->
                        <el-button type="success" icon="el-icon-unlock" size="mini" title="解封用户" v-if="row.isBanned == 1"
                            @click="deBlockUser(row)"></el-button>
                        <el-button type="danger" icon="el-icon-lock" size="mini" title="封禁用户" v-else
                            @click="blockUser(row)"></el-button>

                        <!-- <el-button  type="warning" icon="el-icon-edit" size="mini" title="修改商品" @click="updateGoods(row)">
                        </el-button > -->

                        <el-popconfirm title="确定删除吗？" @confirm="deleteUser(row)" >
                            <el-button slot="reference" type="danger" icon="el-icon-delete" size="mini"
                                title="删除用户" style="margin-left: 5px;"></el-button>
                        </el-popconfirm>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination 
            style="text-align:center" 
            :current-page="pageNo" 
            :page-sizes="[5, 10, 20]" 
            :page-size="pageSize"
                layout="prev, pager, next, jumper,->,sizes,total" @current-change="getUserList"
                @size-change="handleSizeChange" :total="total">
            </el-pagination>
        </div>
    </div>
</div></template>

<script>
export default {
    name: 'user',
    data() {
        return {
            userList: [],
            pageNo: 1,
            pageSize: 5,
            total: 0
        };
    },

    mounted() {
        this.getUserList()
    },

    methods: {
        async getUserList(pages = 1) {
            this.pageNo = pages
            const { pageSize, pageNo } = this
            const res = await this.$API.reqGetUserList({ pageSize, pageNo })
            this.userList = res.data.data.userList
            this.total = res.data.data.total
            console.log(res.data.data);
        },
        handleSizeChange(pageSize) {
            this.pageSize = pageSize
            this.getUserList()
        },
        async deBlockUser(row) {
            let result = await this.$API.reqChangeUserBan({ id: row.id,type:0})
            if (result.data.code == 200) {
                row.isBanned = 0;
                this.$message({
                    message: '该账号已解封',
                    type: 'success'
                })
            }
        },
        async blockUser(row) {
            let result = await this.$API.reqChangeUserBan({ id: row.id,type:1})
            if (result.data.code == 200) {
                row.isBanned = 1;
                this.$message({
                    message: '该账号已被封禁',
                    type: 'success'
                })
            }
        },
        async deleteUser(row) {
            let result = await this.$API.reqDeleteUser(row.id)
            if (result.data.code == 200) {
                this.$message({
                    message: '删除成功',
                    type: 'success'
                })
                //如果当前页数据大于1，停留在本页，等于1则删除后跳到前一页
                this.getUserList(this.userList.length > 1 ? this.pageNo : this.pageNo - 1);
            } else if (result.data.code == 201) {
                this.$message({
                    message: '该商品不可删除',
                    type: 'warning'
                })
            }
        },
    },
};
</script>

<style  ></style>